<template>
  <div class="hot-container">
    <el-skeleton :loading="!hotList.length" animated>
      <template>
        <el-card :body-style="{ padding: '10px' }">
          <template #header>热门内容</template>
          <div class="item" v-for="item in hotList" :key="item.id">
            <RouterLink class="card-pic" :to="`/detail/${item.id}`">
              <img :src="baseURL + item.image" alt="" />
              <span class="mask">
                <i class="el-icon-search" />
              </span>
            </RouterLink>
            <div class="title">{{ item.title }}</div>
          </div>
        </el-card>
      </template>
      <template slot="template">
        <div style="padding: 18px 20px">
          <el-skeleton-item style="width: 15%; height: 16px" />
        </div>
        <div style="padding: 10px">
          <el-skeleton-item variant="image" style="height: 250px" />
        </div>
        <div style="padding: 10px">
          <el-skeleton-item style="height: 30px" />
        </div>
        <div style="padding: 10px">
          <el-skeleton-item variant="image" style="height: 250px" />
        </div>
        <div style="padding: 10px">
          <el-skeleton-item style="height: 30px" />
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import { reqHotList } from '@/api'
import { baseURL } from '@/utils/request.js'

export default {
  name: 'MyHot',
  data() {
    return {
      baseURL: baseURL + 'upload/',
      hotList: []
    }
  },
  async created() {
    const { data: res } = await reqHotList()
    this.hotList = res
  }
}
</script>

<style lang="less" scoped>
.el-card {
  .item {
    & ~ .item {
      margin-top: 20px;
    }
  }

  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 16px 0 10px 0;
  }
  .card-pic {
    display: block;
    position: relative;
    width: 100%;
    height: 250px;

    &:hover {
      .mask {
        opacity: 1;

        i {
          transform: translateY(0);
        }
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      transition: all 0.35s;

      i {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        border-radius: 50%;
        color: #fff;
        background-color: @primaryColor;
        transform: translateY(50%);
        transition: all 0.35s;
      }
    }
  }
}
</style>
